<template>
  <el-row :gutter="20">
    <el-col :span="8">
      <el-card class="box-card">
        <ServerState :metrics-data="metricsData" />
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card">
        <request-response-chart :metrics-data="metricsData" />
      </el-card>
    </el-col>
    <el-col :span="8">
      <el-card class="box-card">
        <response-by-dims-chart :metrics-data="metricsData" />
      </el-card>
    </el-col>
  </el-row>
  <el-row
    :gutter="20"
    style="margin-top: 16px"
  >
    <el-col :span="12">
      <el-card class="box-card">
        <request-by-dims-chart :metrics-data="metricsData" />
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { getMetricsServerState } from '@/api/devops'
import { isResultSuccess } from '@/util/http'
import ServerState from './components/ServerState.vue'
import RequestResponseChart from './components/RequestResponseChart.vue'
import RequestByDimsChart from './components/RequestByDimsChart.vue'
import ResponseByDimsChart from './components/ResponseByDimsChart.vue'

const metricsData = ref<any>(null)
const timer = ref<number>()

// 获取数据
const refreshData = async () => {
  try {
    const res = await getMetricsServerState()
    if (res && isResultSuccess(res)) {
      metricsData.value = res.data
    }
  } catch (error) {
    console.error('获取统计数据失败:', error)
  }
}

onMounted(() => {
  refreshData()
  timer.value = window.setInterval(refreshData, 5000)
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
  }
})
</script>

<style scoped>
.box-card {
  float: left;
  border-radius: 10px;
  width: 100%;
}

.box-card:hover {
  box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.4);
}
</style>
